<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 解决jquery easyui tabs使用fit后，在页面中出现下拉滚动条的bug。 -->
<!-- https://www.cnblogs.com/-cxh/p/4065207.html -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SideMenu Style - jQuery EasyUI Demo</title>
    <script th:src="@{/js/easyui/base_loading.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/webjars/easyui/1.6.6/themes/material-teal/easyui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/webjars/easyui/1.6.6/themes/icon.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/webjars/easyui/1.6.6/themes/color.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/webjars/easyui/1.6.6/demo/demo.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/webjars/easyui/1.6.6/demo/sidemenu/sidemenu_style.css}">
    <link rel="stylesheet" th:href="@{/css/easyui/common.css}">
    <style>
        #sm .accordion{
            border-style: none;
        }

        #sm{
            width:200px;
            height:100%;
            border-style: none;
            background-color: #1E282C
        }

        /* 设置滚动条的样式 */
        ::-webkit-scrollbar {
            width: 2px;
        }
        /* 滚动槽 */
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            border-radius: 2px;
        }
        /* 滚动条滑块 */
        ::-webkit-scrollbar-thumb {
            border-radius: 2px;
            background: #bbb;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
        }
        ::-webkit-scrollbar-thumb:window-inactive {
            background: rgba(255,0,0,0.4);
        }

        .box1{
            display: table-cell;
            vertical-align: middle;
        }

        /**
        easyui tabs默认显示左右切换按钮。
         */
        .tabs-scroller-left,.tabs-scroller-right{
            display: block !important;
            height: 31px !important;
        }
        .tabs-wrap{
            margin-left: 20px !important;
            margin-right: 20px !important;
        }
    </style>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:46px;">
    <div class="easyui-layout" data-options="fit:true">
        <div id="admin" data-options="region:'west',split:false,border:false" style="width:200px;background-color: #009ACD;text-align: center">
            <h3 style="color: white">Administrator</h3>
        </div>
        <div data-options="region:'center',split:false,border:false" style="background-color: #00BBEE;padding-left: 10px;height:60px;" class="navbar">
            <!--<a href="javascript:void(0);" onclick="toggle()"><i class="fa fa-bars" aria-hidden="true" style="color:white"></i></a>
            <div class="dropdown" style="float: right">
                <button onclick="myFunction()" class="dropbtn">Dropdown</button>
                <div id="myDropdown" class="dropdown-content">
                    <a href="#home">Home</a>
                    <a href="#about">About</a>
                    <a href="#contact">Contact</a>
                </div>
            </div>-->
            <!--<a href="javascript:void(0);" onclick="toggle()"><i class="fa fa-bars" aria-hidden="true" style="color:white"></i></a>
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
            <div class="dropdown" style="float:right;">
                <button onclick="myFunction()" class="dropbtn">Dropdown<i class="fa fa-caret-down"></i></button>
                <div id="myDropdown" class="dropdown-content">
                    <a href="#home">Home</a>
                    <a href="#about">About</a>
                    <a href="#contact">Contact</a>
                </div>
            </div>-->
            <a href="javascript:void(0);" onclick="toggle()"><i class="fa fa-bars" aria-hidden="true" style="color:white"></i></a>
            <a href="#home">Home</a>
            <a href="#news">News</a>
            <div class="dropdown" style="float:right;">
                <button class="dropbtn" onclick="myFunction(this)">
                    &nbsp;&nbsp;<i class="fa fa-user-circle-o fa-2x" aria-hidden="true"></i>&nbsp;&nbsp;
                </button>
                <div class="dropdown-content">
                    <a href="javascript:void(0)">编辑</a>
                    <a href="javascript:void(0)">退出</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="sm" data-options="region:'west',split:false,title:'',data:data,collapsible:false,panelHeight:'auto',onSelect:onMenuSelect" class="easyui-sidemenu">
</div>
<!--<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>-->
<!--<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>-->
<div id="center" data-options="region:'center'">
    <!--<table id="tt" class="easyui-datagrid" data-options="method:'get',fit:true"
           url="/json/data.json"
           title="Load Data"
           rownumbers="true" pagination="true">
        <thead>
        <tr>
            <th field="itemid" width="80">Item ID</th>
            <th field="productid" width="120">Product ID</th>
            <th field="listprice" width="80" align="right">List Price</th>
            <th field="unitcost" width="80" align="right">Unit Cost</th>
            <th field="attr1" width="200">Attribute</th>
            <th field="status" width="60" align="center">Stauts</th>
        </tr>
        </thead>
    </table>-->
    <div id="tt" class="easyui-tabs" data-options="fit:true,tools:'#tab-tools'">
        <!--<div title="About" data-options="closable:true" style="padding:10px;">
            <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
                <div style="margin-bottom:20px">
                    <input class="easyui-datetimebox" label="Select DateTime:" labelPosition="top" style="width:100%;">
                </div>
                <div style="margin-bottom:20px">
                    <input class="easyui-textbox" label="Description:" labelPosition="top" style="width:100%;">
                </div>
            </div>
            <div class="easyui-calendar" style="width:250px;height:250px;"></div>
            <ul>
                <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
                <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
                <li>complete framework for HTML5 web page.</li>
                <li>easyui save your time and scales while developing your products.</li>
                <li>easyui is very easy but powerful.</li>
            </ul>
        </div>
        <div title="My Documents" data-options="closable:true" style="padding:10px">
            <ul class="easyui-tree" data-options="url:'/json/data.json',method:'get',animate:true"></ul>
        </div>
        <div title="Help" data-options="closable:true" style="padding:10px">
            This is the help content.
        </div>-->
    </div>
    <div id="tab-tools" style="margin-right: 20px">
        <!--<div class="dropdown">
            <button class="dropbtn" onclick="myFunction(this)" style="color: black">
                关闭操作
            </button>
            <div class="dropdown-content">
                <a href="javascript:void(0)">编辑</a>
                <a href="javascript:void(0)">退出</a>
            </div>
        </div>
        <a href="javascript:void(0)" onclick="removePanel()">退出</a>-->
    </div>
</div>
<script type="text/javascript" th:src="@{/webjars/easyui/1.6.6/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/webjars/easyui/1.6.6/jquery.easyui.min.js}"></script>
<script type="text/javascript" th:src="@{/webjars/easyui/1.6.6/locale/easyui-lang-zh_CN.js}"></script>
<!--<script type="text/javascript" th:src="@{/js/easyui/tabutil.js}"></script>-->
<script type="text/javascript" th:src="@{/js/easyui/common.js}"></script>
<script>
    $(function () {
        //$('.tabs-scroller-left,.tabs-scroller-right').css({'display': 'block', 'height': '31px'});
        //$('.tabs-wrap').css({'margin-left': '20px', 'margin-right': '20px'});
    });
</script>
<script type="text/javascript">
    var jsonData = $.ajax({url:"http://localhost:8182/sideMenus/easyui",async:false,dataType:'json'});
    console.log(jsonData);
    var data = jsonData['responseJSON']['data'];
    console.log(data);
    /*var data = [{
        text: 'Forms',
        iconCls: 'fa fa-wpforms',
        state: 'open',
        children: [{
            text: '<i class="fa fa-bars" aria-hidden="true" style="color:white"></i> Form Element',
        },{
            text: 'Wizard',
        },{
            text: 'File Upload'
        }]
    },{
        text: 'Mail',
        iconCls: 'fa fa-at',
        selected: true,
        children: [{
            text: 'Inbox'
        },{
            text: 'Sent'
        },{
            text: 'Trash',
            children: [{
                text: 'Item1',
            },{
                text: 'Item2'
            }]
        }]
    },{
        text: '系统管理',
        iconCls: 'fa fa-table',
        children: [{
            text: 'Panel'
        },{
            text: 'Accordion'
        },{
            text: 'Tabs'
        }]
    }];*/

    function toggle(){
        var opts = $('#sm').sidemenu('options');
        $('#sm').sidemenu(opts.collapsed ? 'expand' : 'collapse');
        opts = $('#sm').sidemenu('options');
        $('#sm').sidemenu('resize', {
            width: opts.collapsed ? 60 : 200
        });
        $('#sm').panel({
            width: opts.collapsed ? 60 : 200
        });
        $('#admin').panel({
            width: opts.collapsed ? 60 : 200
        });
        if (opts.collapsed){
            $('#sm,#sm div').css('width', 60);
            $('#admin>h3').text('Adm');
        }else{
            $('#admin>h3').text('Administrator');
        }
        $('body').layout('resize');
    }
</script>
<script type="text/javascript">

    function changeP(){
        var dg = $('#tt');
        dg.datagrid('loadData',[]);
        dg.datagrid({pagePosition:$('#p-pos').val()});
        dg.datagrid('getPager').pagination({
            layout:['list','sep','first','prev','sep',$('#p-style').val(),'sep','next','last','sep','refresh','info']
        });
    }
</script>
<script>
    $('#tt').tabs({
        plain: false,
        narrow: true,
        pill: false,
        justified: false
    });

    let count = 0;

    function addTab(title, url, closable) {
        if ($('#tt').tabs('exists', title)){
            $('#tt').tabs('select', title);
        }else{
            var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
            $('#tt').tabs('add',{
                title:title,
                content:content,
                closable:closable,
                selected: true
            });
        }
        /*$('#tt').tabs('addIframeTab',{
            tab:{title:'iframe'+count++,closable:true},
            iframe:{src:'http://localhost:8182/easyui/tab1'}

        });*/
    }

    //addTab('iframe', 'http://localhost:8182/easyui/tab1');

    function onMenuSelect(item){
        console.log(item.url);
        addTab(item.text, item.url, true);
    }

    /*addTab('tab1', 'tab1');
    addTab('tab2', 'tab2');
    addTab('tab3', 'tab3');
    addTab('table_list', 'table_list');*/
    addTab('首页', '/easyui/home.html', false);
</script>
</body>
</html>